<template>
  <div class="cycle">
    <div class="container" :style="baseStyle">
      <div class="lefthalf" :style="rightCom"></div>
      <div class="righthalf" :style="leftCom"></div>
<<<<<<< HEAD
      <div class="centerData" :style="centerSize">{{ text }}</div>
=======
      <div class="centerData" :style="centerStyle">{{ text }}</div>
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
    </div>
  </div>
</template>

<script>
<<<<<<< HEAD
=======
import { defineAsyncComponent } from "vue";
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
export default {
  props: {
    rate: Number,
    text: String,
    size: Number,
<<<<<<< HEAD
=======
    layerColor: {
      //进度条颜色
      type: String,
      default: "#07C460",
    },
    fill: {
      // 中心填充颜色
      type: String,
      default: "#fff",
    },
    color: {
      // 中心文字颜色
      type: String,
      default: "#0DB392",
    },
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
  },
  data() {
    return {
      nowRate: null,
      nowSize: null,
    };
  },
  computed: {
<<<<<<< HEAD
    baseSize() {
      return `width:${this.nowSize}px;height:${this.nowSize}px;`;
    },
    centerSize() {
      return `width:${this.nowSize - 10}px;height:${this.nowSize - 10}px;`;
=======
    baseStyle() {
      return `width:${this.nowSize}px;height:${this.nowSize}px;background:${this.layerColor}`;
    },
    centerStyle() {
      return `width:${this.nowSize - 10}px;height:${
        this.nowSize - 10
      }px;background-color:${this.fill};color:${this.color}`;
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
    },
    rightCom() {
      let baseStr = `clip: rect(0 auto auto ${this.nowSize / 2}px);`;
      if (this.nowRate <= 50) {
        baseStr += `transform: rotate(${360 * (this.nowRate / 100)}deg);`;
      } else if (this.nowRate > 50) {
<<<<<<< HEAD
        baseStr += `background-color: rgb(13, 179, 146)`;
=======
        baseStr += `background-color: ${this.layerColor}`;
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
      }
      return baseStr;
    },
    leftCom() {
      let baseStr = `clip: rect(auto ${this.nowSize / 2}px auto auto);`;
      if (this.nowRate > 50) {
        baseStr += `transform: rotate(${
          360 * ((this.nowRate - 50) / 100)
        }deg);`;
      }
      return baseStr;
    },
  },
  watch: {
    rate(value) {
<<<<<<< HEAD
      console.log("change");
=======
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
      this.nowRate = value;
    },
    nowRate(newValue) {
      if (newValue > 100) {
        this.nowRate = newValue - 100;
        console.log("ange");
      }
    },
  },
  mounted() {
    // 这里可以参考一下 最好是重新赋值一遍会比较好
    this.nowRate = this.rate;
    this.nowSize = this.size;
    console.log("2.x", this.rate, this.nowSize);
  },
  methods: {
    addOne() {
      this.nowRate += 10;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 200px;
  height: 200px;
  // background: rgb(13, 179, 146);
  border-radius: 50%;
  position: relative;
  z-index: 11;
  .lefthalf {
    width: 100%;
    height: 100%;
<<<<<<< HEAD
    background-color: rgb(216, 208, 217);
=======
    background-color: #fff;
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
    clip: rect(0 auto auto 100px);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    z-index: 10;
    transition: all ease-in-out 0.5s;
<<<<<<< HEAD
=======
    box-shadow: 0 0 10px #fff;
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
  }
  .righthalf {
    z-index: 9;
    width: 100%;
    height: 100%;
    background-color: #fff;
    clip: rect(auto 100px auto auto);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    transition: all ease-in-out 0.5s;
<<<<<<< HEAD
=======
    box-shadow: 0 0 10px #fff;
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
  }
  .centerData {
    width: 180px;
    height: 180px;
    // background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 15;
    font-size: 18px;
    font-weight: bold;
    // color: rgb(13, 179, 146);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>